<template>
  <el-dialog title="详情" :visible.sync="dialogVisible" width="72%">
    <el-descriptions :column="3" size="mini" border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          设备编号
        </template>
        {{ currentTerminal ? currentTerminal.terminalID : '-' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          口径
        </template>
        {{ currentTerminal ? currentTerminal.caliber : '-' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          采集频率
        </template>
        {{ currentTerminal ? currentTerminal.collectionFrequency : '-' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          设备名称
        </template>
        {{ currentTerminal ? currentTerminal.terminalName : '-' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          安装地址
        </template>
        {{ currentTerminal ? currentTerminal.terminalInstallAddr : '-' }}
      </el-descriptions-item>
    </el-descriptions>

    <div style="margin-top: 10px;display: flex;justify-content: space-between;">
      <div style="width: 50%;">
        <el-radio-group v-model="chartType" v-show="mode === 'chart'" @change="handleChartTypeChange">
          <el-radio label="instantNumber">瞬时流量(m³/h)</el-radio>
          <!--          <el-radio label="totalFlow">净累计流量(m³)</el-radio>-->
          <el-radio label="pressure">压力(MPa)</el-radio>
        </el-radio-group>
      </div>
      <div style="width: 50%;text-align: right;">
        <el-date-picker v-model="queryDate"
                        size="mini"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        style="width: 210px;"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="handleQueryDateChange">
        </el-date-picker>

        <el-button size="mini"
                   style="margin-left: 10px;"
                   :type="mode === 'chart'? 'primary':'plain'"
                   @click="handleModeClick('chart')">图表
        </el-button>
        <el-button size="mini"
                   :type="mode === 'grid'? 'primary':'plain'"
                   @click="handleModeClick('grid')">表格
        </el-button>
      </div>

    </div>

    <div style="width: 100%;margin-top: 10px;">
      <div style="width: 100%;" v-show="mode === 'chart'">
        <div id="terminal-data-chart" style="width: 100%;height: 580px;"></div>
      </div>

      <div v-show="mode === 'grid'">
        <el-table v-loading="loading" :data="terminalHisPageDataList" border :height="530">
          <el-table-column type="index" width="40" align="center" label="#"/>
          <el-table-column label="抄表时间" align="center" prop="ReadDate" width="180"/>
          <el-table-column label="累计流量" align="center" prop="totalFlow"/>
          <el-table-column label="正向流量" align="center" prop="readNumber"/>
          <el-table-column label="反转流量" align="center" prop="reverseNumber"/>
          <el-table-column label="瞬时流量" align="center" prop="instantNumber"/>
          <el-table-column label="管网压力" align="center" prop="pressure"/>
          <el-table-column label="终端电压" align="center" prop="terminalVol"/>
          <el-table-column label="终端信号强度" align="center" prop="terminalCSQ"/>
        </el-table>

        <pagination v-show="total>0"
                    :total="total"
                    :page-sizes="[15, 30, 45, 60]"
                    :page.sync="pager.pageNum"
                    :limit.sync="pager.pageSize"
                    @pagination="getPageData"
        />
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button type="danger" @click="dialogVisible = false">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import * as echarts from 'echarts';
import moment from "moment";
import {getAllTerminalHistoryData} from '@/api/leakage/terminalHistoryData'

require('echarts/theme/macarons') // echarts theme

export default {
  name: 'TerminalDataDetailDialog',
  data() {
    return {
      dialogVisible: false,
      queryDate: [new moment().subtract(6, 'd').format('YYYY-MM-DD'), new moment().format('YYYY-MM-DD')],
      mode: 'chart',
      chartType: 'instantNumber',
      terminalHisDataList: [],
      terminalHisPageDataList: [],
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      pager: {
        pageNum: 1,
        pageSize: 15,
      },
      terminalDataChart: undefined,
      currentTerminal: undefined,
      baseOption: {
        color: ['#1890ff'],
        grid: {
          top: '8%',
          right: '5%',
          bottom: 65,
          left: '5%',
          containsLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        dataZoom: [{
          "show": true,
          "height": 30,
          "xAxisIndex": [
            0
          ],
          bottom: 5,
          "start": 10,
          "end": 80,
          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          handleSize: '110%',
          handleStyle: {
            color: "#d3dee5",

          },
          textStyle: {
            color: "#fff"
          },
          borderColor: "#90979c"
        }, {
          "type": "inside",
          "show": true,
          "height": 15,
          "start": 1,
          "end": 35
        }],
        xAxis: {
          type: 'category',
          data: [],
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
          }
        },
        series: [
          {
            data: [],
            type: 'line',
            smooth: true,
            markPoint: {
              data: [{
                name: '最大值',
                type: "max"
              }, {
                name: '最小值',
                type: "min"
              }],
              symbol: "pin"
            }
          }
        ]
      },
    };
  },
  methods: {
    initChart() {
      this.terminalDataChart = echarts.init(document.getElementById('terminal-data-chart'), 'macarons')
    },
    getData() {
      this.loading = true
      getAllTerminalHistoryData({
        terminalID: this.currentTerminal.terminalID,
        readDateStart: this.queryDate[0],
        readDateEnd: this.queryDate[1],
      }).then(res => {
        this.loading = false
        this.terminalHisDataList = res.data
        this.total = res.data.length
        this.doHandleData()
      })
    },
    doHandleData() {
      if (this.mode === 'chart') {
        const seriesName = this.chartType === 'instantNumber' ? '瞬时流量(m³/h)' : '压力(MPa)'
        const timeArr = this.terminalHisDataList.map(item => item.ReadDate)
        const dataArr = this.terminalHisDataList.map(item => item[this.chartType])
        const option = Object.assign({}, this.baseOption)
        option.xAxis.data = timeArr
        option.series[0].name = seriesName
        option.series[0].data = dataArr
        this.terminalDataChart.setOption(option)
      }
      this.pager.pageNum = 1
      this.getPageData()
    },
    getPageData() {
      const n = this.pager.pageNum, s = this.pager.pageSize
      this.terminalHisPageDataList = this.terminalHisDataList.slice((n - 1) * s, n * s)
    },
    openDialog(terminal) {
      this.mode = 'chart'
      this.chartType = 'instantNumber'
      this.currentTerminal = terminal
      this.dialogVisible = true
      this.$nextTick(() => {
        this.initChart()
        this.getData()
      })
    },
    handleChartTypeChange() {
      this.doHandleData()
    },
    handleQueryDateChange() {
      this.getData()
    },
    handleModeClick(mode) {
      this.mode = mode
    },
  },
  mounted() {

  }
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog__wrapper {
  z-index: 3000 !important;
}
</style>
